<script lang="ts" setup>
import { type PropType, ref, watch } from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: '',
    },
    show: {
        type: Boolean,
        default: false,
    },
    width: {
        type: Number,
        default: 600,
    },
    type: {
        type: String as PropType<'center' | 'top' | 'left' | 'right' | 'message' | 'dialog' | 'share'>,
        default: 'center',
    },
    isMaskClick: {
        type: Boolean,
        default: false,
    },
})
const emits = defineEmits(['update:show'])

const popUp = ref()

watch(() => props.show, (newval) => {
    if (newval)
        popUp.value?.open()
})

function onClose() {
    popUp.value?.close()
    emits('update:show', false)
}
</script>

<template>
    <uni-popup ref="popUp" :is-mask-click="isMaskClick" :type="type" border-radius="24px">
        <view class="relative rounded-24rpx bg-white p-30rpx" :style="{ width: `${width}rpx` }">
            <view class="text-bold mt-20rpx text-center text-32rpx">{{ title }}</view>
            <view class="absolute right-20rpx top-20rpx" @click="onClose">
                <uni-icons type="closeempty" size="40" />
            </view>
            <slot />
        </view>
    </uni-popup>
</template>
